<!--
 * @Description: 
 * @version: 
 * @Author: sunqian_sr
 * @Date: 2023-03-03 17:05:20
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-10 15:10:51
-->
<template>
  <div class="step-panel">
    <el-steps direction="vertical" :active="activeIndex" finish-status="success">
      <el-step v-for="(item, index) in stepOptions" :key="index" :title="item.label"></el-step>
    </el-steps>
  </div>
</template>
<script>
  export default {
    name: 'CertificationStep',
    props: {
      activeStep: {
        type: Number
      },
      stepOptions: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        activeIndex: 1
      }
    },
    watch: {
      activeStep: {
        handler(val) {
          this.activeIndex = this.activeStep
        },
        immediate: true,
        deep: true
      }
    }
  }
</script>
